<!--
 * @Author: 橘子
 * @Date: 2022-09-30 21:54:25
 * @Project_description: 日志
 * @Description: 代码是我抄的，不会也是真的
-->

<template>
  <d2-container>
    <el-button slot='header' :loading='uploading' size='mini' type='primary' @click='debug'>
      调试模式
    </el-button>
    <el-button slot='header' :loading='uploading' size='mini' type='primary' @click='clearDebug'>
      清除调试
    </el-button>
    <el-table :data='log' empty-text='暂无日志信息' size='mini' stripe style='width: 100%'>
      <!-- 时间 -->
      <el-table-column label='时间' prop='time' width='140'></el-table-column>
      <!-- 信息 -->
      <el-table-column label='消息' prop='message'></el-table-column>
      <!-- 触发页面 -->
      <el-table-column align='center' label='请求url' min-width='200'>
        <template slot-scope='scope'>
          {{ get(scope.row, 'meta.url') }}
        </template>
      </el-table-column>
      <!-- 触发组件 -->
      <el-table-column align='center' label='触发事件' min-width='120'>
        <template slot-scope='scope'>
          <el-tag v-if="get(scope.row, 'meta.instance.$vnode.componentOptions.tag')" size='mini' type='info'>
            &#60;{{ get(scope.row, 'meta.instance.$vnode.componentOptions.tag') }}&gt;
          </el-tag>
        </template>
      </el-table-column>
      <!-- 查看详情 -->
      <el-table-column align='center' fixed='right' label='查看详情' width='100'>
        <template slot-scope='scope'>
          <el-button size='mini' type='primary' @click='handleShowMore(scope.row)'>
            <d2-icon name='eye' />
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-button slot='footer' :loading='uploading' size='mini' type='primary' @click='handleUpload'>
      清除日志
    </el-button>
  </d2-container>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { get } from 'lodash'
import cookies from '@/libs/util.cookies'
import setting from '@/setting'

export default {
  data() {
    return {
      uploading: false,
    }
  },
  computed: {
    ...mapState('d2admin/log', ['log']),
  },
  methods: {
    ...mapMutations('d2admin/log', ['clean']),
    get,
    handleShowMore(log) {
      // 打印一条日志的所有信息到控制台
      this.$notify({
        type: 'info',
        title: '日志详情',
        message: '完整的日志内容已经打印到控制台',
      })

      console.group(log.message)
      console.log('time: ', log.time)
      console.log('type: ', log.type)
      console.log(log.meta)
      console.groupEnd()
    },
    //调试模式
    debug() {
      //
      this.$DialogForm.show({
        title: '调试模式',
        width: '30%',
        data: { url: setting.appInfo.deBugUrl || 'http://' },
        menuPosition: 'right',
        option: {
          submitText: '完成',
          span: 24,
          column: [
            {
              label: '测试地址',
              prop: 'url',
              rules: [{
                required: true,
                message: '请输入测试地址',
                trigger: 'blur',
              }],
            },

          ],
        },
        beforeClose: (done) => {
          done()
        },
        callback: (res) => {
          cookies.set('baseUrl', res.data.url)
          this.$message.success('添加成功')
          res.close()
        },
      })
    },
    clearDebug() {
      cookies.remove('baseUrl')
      this.$message.success('删除成功')
    },
    // 日志上传
    handleUpload() {
      this.clean()
      this.$message.success('清除成功')
      // this.$notify({
      //   type: 'success',
      //   title: '清除日志',
      //   message: '清除成功',
      // })
      // this.uploading = true
      // this.$notify({
      //   type: 'info',
      //   title: '日志上传',
      //   message: `开始上传${this.log.length}条日志`,
      // })
      // setTimeout(() => {
      //   this.uploading = false
      //   this.$notify({
      //     type: 'success',
      //     title: '日志上传',
      //     message: '上传成功',
      //   })
      // }, 3000)
    },
  },
}
</script>
